<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型-外边框</title>
		<style>
			.box{
				width: 200px;
				height: 300px;
				border: 1px solid red;
				margin-top: 100px;/*上外边框*/
				margin-left: 100px;
				margin-right: 100px;
				margin-bottom: 100px;margin: 10px 20px 30px;
				/*复合写法：margin:大小值*/
				margin: 100px auto 0;
				/*盒子水平居中：左右外边框设置为auto   auto:自动的*/
				
			}
			.box2{
				width: 200px;
				height: 300px;
				border: 1px solid blue;
				margin: 100px auto 0;
				
			}
			.box3{
				width: 200px;
				height: 300px;
				/*border-style: solig;*/
				/*boder-width:1px;*/
				/*border-color: red;*/
				/*复合写法:boder:粗细 颜色 样式;*/
				border: 10px red solid;
				/*内边距padding:内容到边框的距离*/
				/*padding-top:10px;
				padding-bottom:20px;
				padding-lefft:30px;
				padding-ight:40px;
				复合写法:padding:大小值;*/
				padding:10px 20px 30px 40px;上右下左(顺时针)
				/*padding:10px 20px 30px;上 左右 下
				padding:10px 20px;上下 左右
				padding:10px;上下左右*/
			}
			
			
			/*相邻两个盒子之间的外边距合并 问题：
			两个盒子同时设置外边距，相邻边只取外边距的最大值
			tips:一般来说只设置一个盒子的外边距*/
			
			
			
		</style>
	</head>
	<body>
	<!--外边框 margin-->
		<div class="box">hello box!</div>
		<div class="box2">hello box2!</div>
		<div class="box3">hello box3!</div>
	</body>
</html>
